<template>
	<view class="">
		<view class="banner pt27 px15 pb22 white fsb flex-align-end">
			<view class="wp60">
				<view class="f12">1 MHS盛大矿机</view>
				<view class="mt20">
					<text class="f20">$</text>
					<text class="f39 fwb">767.84</text>
				</view>
				<view class="mt3 f10">算力单价</view>
				<view class="w360 h8 bgs mt19"><view class="bg-white hp100" style="width: 20%;"></view></view>
			</view>
			<view class="wp40">
				<view class="flex white f11">
					<text class="opacity06">周期：</text>
					<text>24天</text>
				</view>
				<view class="flex white f11 mt12">
					<text class="opacity06">电费：</text>
					<text>$0.21/T·天</text>
				</view>
				<view class="flex white f11 mt26">
					<text class="opacity06">已售 ：</text>
					<text>45%</text>
				</view>
			</view>
		</view>
		<view class="flex"><view class="borders px10 mx15 mb15 fwb my15">可购算力数量</view></view>
		<view class="mx15 fsb wrapyes text--center">
			<view
				class="wp30 bor5 py11 border mb15 fwb"
				v-for="(item, index) in TabArray"
				:key="index"
				:class="TabIndex == index ? 'bg-blue white' : 'btn-color'"
				@click="Tab(index)"
			>
				<text>{{ item }}</text>
			</view>
		</view>
		<view class="py14 bg-blue f14 white mx15 bor10 text--center">立即购买</view>
		<view class="line my15"></view>
		<view class="">
			<view class="flex"><view class="borders px10 mx15 mb15 fwb my15">挖矿套餐详情</view></view>
			<view class="border f12 mx15">
				<view class="fsb px15 borb">
					<text class="wp30 borr py14 ash">挖矿币种</text>
					<text class="wp70 ml10 blue">STD</text>
				</view>
				<view class="fsb px15 borb">
					<text class="wp30 borr py14 ash">挖矿机型</text>
					<text class="wp70 ml10">1 MHS盛大矿机</text>
				</view>
				<view class="fsb px15 borb">
					<text class="wp30 borr py14 ash">生效时间</text>
					<text class="wp70 ml10">2021-02-01</text>
				</view>
				<view class="fsb px15 borb">
					<text class="wp30 borr py14 ash">产品周期</text>
					<text class="wp70 ml10">24天</text>
				</view>
				<view class="fsb px15 borb">
					<text class="wp30 borr py14 ash">算力总量</text>
					<text class="wp70 ml10">120</text>
				</view>
				<view class="fsb px15 borb">
					<text class="wp30 borr py14 ash">矿场电力</text>
					<text class="wp70 ml10">水利发电</text>
				</view>
				<view class="fsb px15">
					<text class="wp30 borr py14 ash">打币周期</text>
					<text class="wp70 ml10">最短周期为每日</text>
				</view>
			</view>
			<view class="blue auto text--center flex flex-justify-center flex-align-center mt15">
				<text>收起</text>
				<image src="../../static/home/top.png" mode="" class="block block15 ml5"></image>
			</view>
		</view>
		<view class="line my15"></view>
		<view class="flex">
			<view class="borders px10 mx15 mb15 fwb my15">
				可购算力数量
				<text class="ash f11">（仅供参考）</text>
			</view>
		</view>
		<view class="mx15 fsb f13 text--center px15 bg-cos bor10 py19">
			<view class="">
				<text class="ash">电费(天)</text>
				<text class="fwb block">$2.12/M</text>
			</view>
			<view class="">
				<text class="ash">静态产出(天)</text>
				<text class="fwb block">$0.12/M</text>
			</view>
			<view class="">
				<text class="ash">总成本(天)</text>
				<text class="fwb block">$2.24/M</text>
			</view>
		</view>
		<view class="mx15 border py20 mt20 bor5">
			<view class="flex-text">
				<text class="f13 fwb">静态收益率</text>
				<text class="block f18 blue fwb ml10">4.80%</text>
			</view>
			<view class="mt30 flex-text">
				<view class="">
					<view class="h228 w124">
						<view class="hui wp100 bor50 por" style="height: 50%;">
							<view class="fwb f12 flex poa left">
								<text>$1060.80</text>
								<view class="flex ml10 flex-justify-center flex-align-center">
									<view class="hui w5 h5 block bor5"></view>
									<view class="w20 h1 hui"></view>
								</view>
							</view>
						</view>
						<view class="bg-blue wp100 por" style="height: 50%;">
							<view class="fwb f12 flex poa left">
								<text>$1060.80</text>
								<view class="flex ml10 flex-justify-center flex-align-center">
									<view class="bg-blue w5 h5 block bor5"></view>
									<view class="w20 h1 bg-blue"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="ash f13 mt15">投入成本</view>
				</view>
				<view class="">
					<view class="h228 w124 por bg-orage bor50 ml15">
						<view class="fwb f12 flex poa right">
							<view class="flex flex-justify-center flex-align-center mr10">
								<view class="w20 h1 bg-orage"></view>
								<view class="bg-orage w5 h5 block bor5"></view>
							</view>
							<text>$1060.80</text>
						</view>
					</view>

					<view class="ash f13 mt15 ml15">挖矿产出</view>
				</view>
			</view>
			<view class="mt18">
				<view class="mx15 huis px15 fsb f11 py9">
					<view class="flex flex-align-center">
						<view class="block w12 h12 hui mr15"></view>
						<text>总成本</text>
					</view>
					<view class="flex flex-align-center">
						<view class="block w12 h12 bg-blue mr15"></view>
						<text>总电费</text>
					</view>
					<view class="flex flex-align-center">
						<view class="block w12 h12 bg-orage mr15"></view>
						<text>静态总产出</text>
					</view>
				</view>
			</view>
		</view>
		<view class="mx15 border py20 mt20 bor5">
			<view class="flex-text">
				<text class="f13 fwb">静态回本天数</text>
				<text class="block f18 blue fwb ml10">24天</text>
			</view>
			<view class="curve auto por">
				<view class="day1 py6 px14 bg-orage f12 white">24天</view>
				<view class="day2 py6 px14 bg-black f12 white">24天</view>
				<view class="strip">
					<view class="spot1" style="left:60%"></view>
					<view class="spot2" style="left:80%"></view>
				</view>
			</view>
			<view class="mt18">
				<view class="mx15 huis px15 flex-text f11 py9">
					<view class="flex flex-align-center mr30">
						<view class="block w12 h12 bg-orage mr15"></view>
						<text>总成本</text>
					</view>
					<view class="flex flex-align-center">
						<view class="block w12 h12 bg-black mr15"></view>
						<text>总电费</text>
					</view>
				</view>
			</view>
		</view>
		<view class="border px15 pt24 pb20 mx15 my15 bor5">
			<view class="fwb f14">指标说明：</view>
			<view class="ash f13 mt14">
				1、指标说明文字内容展示，默认三行，超出部分隐藏指 标说明文字内容展示，默认三行，超出部分隐藏指标说 明文字内容展示，默认三行，超出部分隐藏指标说明…
			</view>
			<view class="blue auto text--center flex flex-justify-center flex-align-center">
				<text>展开全部内容</text>
				<image src="../../static/home/bottom.png" mode="" class="block block15 ml5"></image>
			</view>
		</view>
		<view class="line mt15"></view>
		<view class="flex"><view class="borders px10 mx15 mb15 fwb my15">购买须知</view></view>
		<view class="f13 mx15 my15 pb90">
			<view class="fwb mt20">法律声明</view>
			<view class="ash mt14">
				指标说明文字内容全部展示，不做隐藏
				指标说明文字内容全部展示，不做隐藏指标说明文字内容全部展示，不做隐藏指标说明文字内容全部展示，不做隐藏指标说明文字内容全部展示，不做隐藏指标说明文字内容全部展示，不做隐藏指标说明文字内容全部展示，不做隐藏
			</view>
			<view class="fwb mt20">法律声明</view>
			<view class="ash mt14">指标说明文字内容全部展示，不做隐藏 指标说明文字内容全部展示，不做隐藏指标说明文字内容全部展示，</view>
			<view class="fwb mt20">法律声明</view>
			<view class="ash mt14">指标说明文字内容全部展示，不做隐藏 指标说明文字内容全部展示，不做隐藏指标说明文字内</view>
			<view class="fwb mt20">法律声明</view>
			<view class="ash mt14">指标说明文字内容全部展示，不做隐藏 指标说明文字内容全部展示，不做隐藏指标说明文字内</view>
		</view>
		<view class="bg-blue white f14 py14 text--center btns wp100">
			立即购买
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			TabArray: ['5M', '10M', '30M', '50M', '100M', '200M', '1000M'],
			TabIndex: 1
		};
	},
	onShow() {},
	methods: {
		Tab(index) {
			this.TabIndex = index;
		}
	}
};
</script>

<style lang="less">
.banner {
	background: url(../../static/home/bg-blue.png) no-repeat;
	background-size: 100% 100%;
}
.f39 {
	font-size: 76rpx;
}

.w360 {
	width: 360rpx;
}
.bgs {
	background: rgba(255, 255, 255, 0.5);
	border-radius: 2rpx;
}
.borders {
	border-left: 15rpx solid #308ae4;
}
.btn-color {
	background: #f3f5f7;
}
.border {
	border: 2rpx solid #d7d7d7;
}
.line {
	width: 750rpx;
	height: 16rpx;
	background: #f5f5f5;
}
.bg-cos {
	background: #f3f5f7;
}
.borr {
	border-right: 1rpx solid #d7d7d7;
}
.borb {
	border-bottom: 1rpx solid #d7d7d7;
}
.hui {
	background: #e2e2e2;
}
.bor50 {
	border-radius: 200rpx 200rpx 0 0;
}
.w124 {
	width: 124rpx;
}
.h228 {
	height: 228rpx;
}
.left {
	left: 0;
	top: 50%;
	transform: translate(-100%, 0%);
}

.right {
	right: 0;
	top: 50%;
	transform: translate(100%, 0%);
}
.huis {
	background: #f3f5f7;
}
.bg-orage {
	background-color: #fb560a;
}
.curve {
	width: 576rpx;
	height: 280rpx;
	border-left: 4rpx solid #e2e2e2;
	border-bottom: 4rpx solid #e2e2e2;
}
.strip {
	position: absolute;
	top: 100%;
	left: 0;
	// bottom: 0;
	// left: 0;
	width: 576rpx;
	height: 4rpx;
	background-color: #fb560a;
	transform: rotate(-20deg);
	transform-origin: left top;
}
.spot1 {
	width: 15rpx;
	height: 15rpx;
	border-radius: 50%;
	transform: translate(0, -30%);
	position: absolute;
	top: 0;
	background-color: #fb560a;
}
.spot2 {
	width: 15rpx;
	height: 15rpx;
	border-radius: 50%;
	transform: translate(0, -30%);
	position: absolute;
	top: 0;
	background-color: #202021;
}
.day1 {
	position: absolute;
	top: 20%;
	left: 50%;
}

.day2 {
	position: absolute;
	top: 60%;
	left: 70%;
}
.bg-black {
	background: black;
}
.btns{
	position: fixed;
	bottom: 0;
	left: 0;
}
.pb90{
	padding-bottom: 180rpx;
}
</style>
